<template>
  <el-form ref="loginForm" :model="loginForm" class="login-form" id="login-form">
    <el-form-item class="itemBorder" :class="cUsernameCls">
      <el-col :span="3" class="noBottom">
        <div class="icon-right username">
          <div class="line"></div>
        </div>
      </el-col>
      <el-col :span="21" class="noBottom">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入账号"
          class="noBorder"
          @focus="focusCls('username')"
          @blur="blurCls('username')"
          clearable
        ></el-input>
      </el-col>
    </el-form-item>
    <el-form-item class="itemBorder" :class="cPasswordCls">
      <el-col :span="3" class="noBottom">
        <div class="icon-right password">
          <div class="line"></div>
        </div>
      </el-col>
      <el-col :span="21" class="noBottom">
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          class="noBorder"
          @focus="focusCls('password')"
          @blur="blurCls('password')"
          show-password
          clearable
        ></el-input>
      </el-col>
    </el-form-item>
    <el-button type="primary" style="width:100%;" class="login-btn" @click="loginIn">登陆</el-button>
    <div class="tips">
      <div class="tips-left">
        <el-checkbox v-model="checked">记住我(公共场所慎用)</el-checkbox>
      </div>
      <div class="tips-right" @click="handleReset">重置</div>
    </div>
  </el-form>
</template>

<script>
import clsMixins from "../mixins/clsMixins.js"; // 处理input状态逻辑(mixins)
// import login from "../../mixins/login";
export default {
  mixins: [clsMixins],
  props: {
    loginForm: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      checked: false
    };
  },
  methods: {
    loginIn () {
      this.$emit("loginIn");
    },
    handleReset () {
      this.$emit("handleReset");
    }
  }
};
</script>

<style lang="less" scoped>
#login-form{
  width: 100%;
   .icon-right{
    width: 100%;
    height: 40px;
    position: relative;
    .line{
      width: 1px;
      height: 25px;
      background: #DCDFE6;
      position: absolute;
      right: 0px;
      top: 8px;
    }
    &.username{
      background:url("../images/user.png") no-repeat center center;
    }
    &.password{
        background:url("../images/password.png") no-repeat center center;
      }
    }
      /deep/ .itemBorder{
        .el-form-item__content{
          border: 1px solid #DCDFE6;
          border-radius:4px;
          transition:all 0.3s;
          .noBottom{
            margin-bottom: 0px;
          }
        }
      }

      /deep/ .usernameActive{
        .el-form-item__content{
          border: 1px solid #2a4177;
        }
      }

      /deep/ .passwordActive{
        .el-form-item__content{
          border: 1px solid #2a4177;
        }
      }
      /deep/ .noBorder{
        .el-input__inner{
          border:none;
        }
      }
      .login-btn{
        background-color:#2a4177 !important;
        border-color: #2a4177 !important;
      }
      .tips{
        margin-top:10px;
        display:flex;
        justify-content:space-between;
        /deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
          background-color:#2a4177 !important;
          border-color: #2a4177 !important;
        }
        /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
          color: #2a4177 !important;
        }
        .tips-right{
          cursor: pointer;
        }
      }
    }
</style>